<template>
  <a-card :bordered="false">
    <div class="table-operator">
      <a-button
        type="primary"
        icon="plus"
        @click="add"
      >新建机构</a-button>
      <template v-show="selectedRowKeys.length > 0">
        <a-button
          style="margin-left: 8px"
          @click="del"
        >
          删除
        </a-button>
      </template>
    </div>
    <a-table
      :columns="columns"
      :dataSource="data"
      :rowSelection="rowSelection"
      size="middle"
      :indentSize="24"
      @expand="loadDate()"
    > <span
      slot="action"
      slot-scope="text, record"
    >
      <a @click="add">编辑</a>
      <a-divider type="vertical" />
      <a-dropdown>
        <a class="ant-dropdown-link">
          更多
          <a-icon type="down" />
        </a>
        <a-menu slot="overlay">
          <a-menu-item>
            <a href="javascript:;">详情</a>
          </a-menu-item>
          <a-menu-item>
            <a href="javascript:;">禁用</a>
          </a-menu-item>
          <a-menu-item>
            <a href="javascript:;">删除</a>
          </a-menu-item>
        </a-menu>
      </a-dropdown>
    </span>
    </a-table>
    <a-modal
      title="编辑机构"
      :width="800"
      v-model="visible"
      @ok="handleOk"
      :confirmLoading="confirmLoading"
    >
      <a-form :autoFormCreate="(form)=>{this.form = form}">

        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label='机构名称：'
          hasFeedback
          validateStatus='success'
        >
          <a-input
            placeholder='机构名称'
            v-model="mdl.no"
            id='no'
          />
        </a-form-item>

        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label='选择上级机构：'
          hasFeedback
        >
          <a-cascader
            :options="options1"
            @change="onChange"
            :defaultValue="['内蒙古自治区', '锡林郭勒盟', '二连浩特市']"
          />
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label='机构类型：'
          hasFeedback
        >
          <a-select
            defaultValue="lucy"
            style="width: 120px"
          >
            <a-select-option value="jack">自治区</a-select-option>
            <a-select-option value="lucy">盟市</a-select-option>
            <a-select-option value="Yiminghe">旗县</a-select-option>
          </a-select>
        </a-form-item>

      </a-form>
    </a-modal>
  </a-card>
</template>

<script>
import STable from "@/components/table/";
const columns = [
  {
    title: "组织机构名称",
    dataIndex: "orgName",
    key: "orgName"
  },
  {
    title: "机构编码",
    dataIndex: "orgCode",
    key: "orgCode",
    width: "12%"
  },
  {
    title: "机构类型",
    dataIndex: "orgTypeName",
    width: "30%",
    key: "orgTypeName"
  }
];

const data = [
  {
    key: 1,
    orgCode: 1,
    orgName: "内蒙古教育厅",
    orgTypeName: "自治区/省级",
    children: [
      {
        key: 11,
        orgCode: 2,
        orgName: "呼和浩特市教育局",
        orgTypeName: "盟/市级",
        children: [
          {
            key: 21,
            orgCode: 21,
            orgName: "新城区教育局",
            orgTypeName: "区/旗县级",
            children: []
          },
          {
            key: 22,
            orgCode: 22,
            orgName: "赛罕区教育局",
            orgTypeName: "区/旗县级",
            children: []
          },
          {
            key: 23,
            orgCode: 23,
            orgName: "回民区教育局",
            orgTypeName: "区/旗县级",
            children: []
          },
          {
            key: 24,
            orgCode: 24,
            orgName: "玉泉区教育局",
            orgTypeName: "区/旗县级",
            children: []
          },
          {
            key: 25,
            orgCode: 25,
            orgName: "武川县教育局",
            orgTypeName: "区/旗县级",
            children: []
          },
          {
            key: 26,
            orgCode: 26,
            orgName: "和林格尔县教育局",
            orgTypeName: "区/旗县级",
            children: []
          }
        ]
      },
      {
        key: 12,
        orgCode: 3,
        orgName: "包头市教育局",
        orgTypeName: "盟/市级",
        children: [
          {
            key: 31,
            orgCode: 31,
            orgName: "九原区教育局",
            orgTypeName: "区/旗县级",
            children: []
          },
          {
            key: 32,
            orgCode: 32,
            orgName: "青山区教育局",
            orgTypeName: "区/旗县级",
            children: []
          }
        ]
      },
      {
        key: 13,
        orgCode: 4,
        orgName: "鄂尔多斯市教育局",
        orgTypeName: "盟/市级",
        children: []
      },
      {
        key: 14,
        orgCode: 5,
        orgName: "乌兰察布市教育局",
        orgTypeName: "盟/市级",
        children: []
      },
      {
        key: 15,
        orgCode: 6,
        orgName: "锡林郭勒市教育局",
        orgTypeName: "盟/市级",
        children: []
      },
      {
        key: 16,
        orgCode: 7,
        orgName: "乌海市教育局",
        orgTypeName: "盟/市级",
        children: []
      },
      {
        key: 17,
        orgCode: 8,
        orgName: "兴安盟市教育局",
        orgTypeName: "盟/市级",
        children: []
      }
    ]
  }
];

const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    console.log(
      `selectedRowKeys: ${selectedRowKeys}`,
      "selectedRows: ",
      selectedRows
    );
  },
  onSelect: (record, selected, selectedRows) => {
    console.log(record, selected, selectedRows);
  },
  onSelectAll: (selected, selectedRows, changeRows) => {
    console.log(selected, selectedRows, changeRows);
  }
};

export default {
  components: {
    STable
  },
  data() {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 }
      },
      data,
      columns,
      rowSelection,
      selectedRowKeys: [1],
      selectedRows: [],
      confirmLoading: false,
      visible: false,
      mdl: {},
      options1: [
        {
          value: "内蒙古自治区",
          label: "内蒙古自治区",
          children: [
            {
              value: "锡林郭勒盟",
              label: "锡林郭勒盟",
              children: [
                {
                  value: "二连浩特市",
                  label: "二连浩特市"
                }
              ]
            }
          ]
        }
      ]
    };
  },
  methods: {
    loadDate(event) {
      const hide = this.$message.loading("懒加载下级.." + event, 0);
      setTimeout(hide, 1000);
    },
    add() {
      this.visible = true;
    },
    handleOk() {
      this.confirmLoading = true;
      setTimeout(() => {
        this.visible = false;
        this.confirmLoading = false;
        this.mdl = {};
        this.$message.success("操作成功");
      }, 2000);
    },
    onChange(value) {
      console.log(value);
    },
    del() {
      let t = this;
      this.$confirm({
        title: "是否删除该机构?",
        content: "此操作不可恢复",
        okText: "是",
        okType: "danger",
        cancelText: "否",
        onOk() {
          t.$message.success("操作成功");
        },
        onCancel() {
          console.log("Cancel");
        }
      });
    }
  }
};
</script>

<style>
.table-operator {
  margin-bottom: 20px;
}
</style>
